<template>
  <div class="copyright">
    <div class="banner">
      <img src="@/assets/images/banner_copyright.jpg" />
    </div>
    <div class="w1190">
      <div class="product product1">
        <div class="title">
          <h3>软件著作权</h3>
          <a @click="onSwt">查看更多<i class="icon icon-round-right"></i></a>
        </div>
        <div class="channel">
          <div class="list_head">
            <h4>软件著作权</h4>
            <p>保护智力成果<br />防止网站、APP源代码被抄袭</p>
          </div>
          <div class="list_box">
            <div v-for="(item,index) in rj" v-if="index < 4" :key="item.id" class="box" @click="$router.push({ name: 'ProductDetail', params: { id: item.id } })">
              <h4>{{item.name}}</h4>
              <div class="line"></div>
              <p>{{item.describe}}</p>
<!--              <div v-if="item.price != 0" class="price">￥{{item.price}}</div>-->
<!--              <a v-else @click="onSwt">立即咨询<i class="icon icon-right2"></i></a>-->
              <a @click="onSwt">立即咨询<i class="icon icon-right2"></i></a>
              <img :src="item.image">
            </div>
          </div>
        </div>
      </div>
      <div class="product product2">
        <div class="title">
          <h3>作品著作权</h3>
          <a @click="onSwt">查看更多<i class="icon icon-round-right"></i></a>
        </div>
        <div class="channel">
          <div class="list_head">
            <h4>作品著作权</h4>
            <p>保护原创设计<br />维护原创利益，避免盗版侵权</p>
          </div>
          <div class="list_box">
            <div v-for="(item,index) in zp" v-if="index < 4" :key="item.id" class="box" @click="$router.push({ name: 'ProductDetail', params: { id: item.id } })">
              <h4>{{item.name}}</h4>
              <div class="line"></div>
              <p>{{item.describe}}</p>
<!--              <div v-if="item.price != 0" class="price">￥{{item.price}}</div>-->
<!--              <a v-else @click="onSwt">立即咨询<i class="icon icon-right2"></i></a>-->
              <a @click="onSwt">立即咨询<i class="icon icon-right2"></i></a>
              <img :src="item.image">
            </div>
          </div>
        </div>
      </div>
      <special-list></special-list>
      <div class="news">
        <div class="box">
          <div class="box_tit">
            <h4>软件著作权登记</h4>
            <a @click="onSwt">查看更多<i class="icon icon-round-right"></i></a>
          </div>
          <div class="box_list">
            <div class="img">
              <img src="@/assets/images/img_news5.jpg" />
            </div>
            <div class="list">
              <a @click="onSwt">版权登记流程是什么?版权登记需要哪些资料?</a>
              <a @click="onSwt">版权登记证书补办流程是什么?</a>
              <a @click="onSwt">软件著作权登记有什么作用？</a>
              <a @click="onSwt">计算机软件著作权申请有哪些好处?</a>
            </div>
          </div>
        </div>
        <div class="box">
          <div class="box_tit">
            <h4>作品著作权登记</h4>
            <a @click="onSwt">查看更多<i class="icon icon-round-right"></i></a>
          </div>
          <div class="box_list">
            <div class="img">
              <img src="@/assets/images/img_news6.jpg" />
            </div>
            <div class="list">
              <a @click="onSwt">美术作品版权登记费用是多少</a>
              <a @click="onSwt">版权登记的有效期是多久?</a>
              <a @click="onSwt">美术作品版权申请流程是什么</a>
              <a @click="onSwt">著作权包含哪些内容？</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import SpecialList from './components/SpecialList'
import { getProductByCategory } from '@/api/product'
import apis from '@/api'

export default {
  components: {
    SpecialList
  },
  name: 'Copyright',
  data () {
    return {
      id: 0,
      rj: [],
      zp: []
    }
  },
  created () {
    this.id = 2
    this.getCp(this.id)
  },
  methods: {
    getCp (id) {
      getProductByCategory(id).then(res => {
        this.rj = res.result.data[0].data
        this.zp = res.result.data[1].data
      })
    },
    onSwt () {
      window.open(apis.Swt)
    }
  }
}
</script>

<style scoped>
h3, h4, h5, p, a, li, ul, div, span {
  margin: 0;
  padding: 0;
  font-weight: 500;
}

@font-face {
  font-family: "icomoon";
  src: url("../../assets/fonts/icomoon.eot");
  src: url("../../assets/fonts/icomoon.eot") format("embedded-opentype"), url("../../assets/fonts/icomoon.woff") format("woff"), url("../../assets/fonts/icomoon.ttf") format("truetype"), url("../../assets/fonts/icomoon.svg") format("svg")
}

[class^="icon-"], [class*=" icon-"] {
  font-family: icomoon;
  font-size: 16px;
  font-weight: normal;
  font-style: normal;
  text-decoration: inherit;
  -webkit-font-smoothing: antialiased
}

[class^="icon-"]:before, [class*=" icon-"]:before {
  text-decoration: inherit;
  display: inline-block;
  speak: none
}

.icon-right2:before {
  content: "\e641"
}

.icon-round-right:before {
  content: "\e642"
}

.w1190 {
  width: 1190px;
  margin: 0 auto;
}

.copyright {
  margin-top: -20px;
  background-color: #ffffff;
  padding-bottom: 60px;
}

.banner {
  font-size: 0;
}

.banner img {
  width: 100%;
}

.title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 55px 0 20px 0;
}

.title h3 {
  font-weight: 700;
  font-size: 30px;
  color: #333333;
}

.title a {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #333333;
}

.title a:hover {
  color: #f52930;
}

.title a i {
  margin-left: 5px;
  font-size: 17px;
  width: 17px;
  height: 17px;
  line-height: 17px;
  color: #e52e3a;
}

.channel {
  display: flex;
  background-color: #f7f7f7;
  padding-right: 12px;
}

.channel .list_head {
  width: 230px;
  height: 320px;
  padding: 45px 0 0 25px;
  margin-right: 18px;
}

.product1 .channel .list_head {
  background: url("../../assets/images/bg_copyright1.jpg") no-repeat center;
}

.product2 .channel .list_head {
  background: url("../../assets/images/bg_copyright2.jpg") no-repeat center;
}

.channel .list_head h4 {
  font-size: 24px;
  color: #ffffff;
  font-weight: 700;
  position: relative;
  padding-bottom: 12px;
}

.channel .list_head h4:before {
  position: absolute;
  content: '';
  left: 0;
  bottom: 0;
  width: 40px;
  height: 2px;
  background-color: #ffffff;
}

.channel .list_head p {
  font-size: 14px;
  color: #ffffff;
  margin-top: 14px;
  line-height: 16px;
}

.channel .list_box {
  display: flex;
}

.channel .list_box .box {
  width: 225px;
  height: 300px;
  padding: 34px 0 0 24px;
  background-color: #ffffff;
  margin: 10px 10px 0 0;
  transition: all 0.2s ease-in;
}

.channel .list_box .box:hover {
  transform: translateY(-4px);
}

.channel .list_box .box h4 {
  height: 48px;
  font-size: 22px;
  line-height: 24px;
  width: 180px;
  color: #333333;
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.channel .list_box .box .line {
  width: 30px;
  margin-top: 8px;
  border-top: 1px dashed #e4e4e4;
}

.channel .list_box .box p {
  margin: 10px 0;
  font-size: 14px;
  color: #999;
  padding-right: 28px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.channel .list_box .box .price {
  color: #ff2f32;
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
}

.channel .list_box .box a {
  color: #ff2f32;
  font-size: 16px;
  display: flex;
  align-items: center;
  height: 24px;
}

.channel .list-box .advisory .icon, .channel .list-box-long .advisory .icon, .channel .list-box-long-advisory .advisory .icon, .channel .list-box-advisory .advisory .icon {
  font-size: 18px;
  margin-left: 2px;
  color: inherit;
  vertical-align: text-bottom;
}

.channel .list_box .box img {
  width: 90px;
  height: 90px;
  margin-top: 32px;
  margin-left: 86px;
}

.news {
  display: flex;
  flex-flow: row wrap;
}

.news .box {
  width: 570px;
  margin-right: 40px;
}

.news .box:nth-child(2n) {
  margin-right: 0;
}

.news .box .box_tit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 55px 0 20px 0;
}

.news .box .box_tit h4 {
  font-size: 24px;
  color: #333;
}

.news .box .box_tit a {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #333333;
}

.news .box .box_tit a:hover {
  color: #f52930;
}

.news .box .box_tit a i {
  margin-left: 5px;
  color: #f52930;
}

.news .box .box_list {
  display: flex;
}

.news .box .box_list .img {
  width: 230px;
  height: 160px;
}

.news .box .box_list .img img {
  display: inline-block;
  width: 100%;
  height: 100%;
}

.news .box .box_list .list {
  width: 340px;
  padding: 8px 0 0 20px;
  overflow: hidden;
  box-sizing: border-box;
}

.news .box .box_list .list a {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  padding-left: 10px;
  position: relative;
  font-size: 14px;
  line-height: 36px;
  color: #333;
  display: block;
}

.news .box .box_list .list a:before {
  position: absolute;
  content: '';
  left: 0;
  top: 16px;
  width: 3px;
  height: 3px;
  background-color: #cccccc;
}

.news .box .box_list .list a:hover {
  color: #f52930;
}
</style>
